<template>
  <!-- 单行文本 -->
  <a-input
    v-if="componentType === 'TEXT'"
    :placeholder="modelData.props?.placeholder"
    allow-clear
    :max-length="modelData.props?.textMax"
    show-word-limit
    v-model="modelValues"
  >
    <template #suffix v-if="modelData.props?.suffix">
      {{ modelData.props?.suffix }}
    </template>
  </a-input>
  <!-- 多行文本 -->
  <a-textarea
    v-if="componentType === 'TEXT_AREA'"
    :placeholder="modelData.props?.placeholder"
    :max-length="modelData.props?.textMax"
    show-word-limit
    auto-size
    allow-clear
    v-model="modelValues"
  />
  <!-- 数字 -->
  <a-input-number
    v-if="componentType === 'TEXT_NUMBER'"
    :placeholder="modelData.props?.placeholder"
    allow-clear
    :max-length="modelData.props?.textMax"
    show-word-limit
    v-model="modelValues"
    hide-button
  >
    <template #suffix v-if="modelData.props?.suffix">
      {{ modelData.props?.suffix }}
    </template>
  </a-input-number>
  <!-- 日期 -->
  <a-date-picker
    v-if="componentType === 'DATE'"
    v-model="modelValues"
    :show-time="modelData.props?.showTime"
    :format="modelData.props?.dateFormat"
  />
  <!-- 日期范围 -->
  <a-range-picker
    v-if="componentType === 'DATE_RANGE'"
    v-model="modelValues"
    :show-time="modelData.props?.showTime"
    :format="modelData.props?.dateFormat"
  />
  <!-- 下拉选择框 -->
  <!-- <a-select v-model="modelValues" v-if="componentType === 'SELECT'">
    <a-option
      v-for="(item, index) in modelData.props?.selectOptions"
      :key="index"
      :value="item.value"
      >{{ item.label }}</a-option
    >
  </a-select> -->
  <Select
    v-if="componentType === 'SELECT'"
    :code="modelData.ctlCode"
    :props="modelData.props"
    v-model:oneValue="modelValues"
    :select-options="modelData.props.selectOptions"
  />
  <!-- 单选框 -->
  <a-radio-group v-model="modelValues" v-if="componentType === 'RADIO'">
    <a-radio
      v-for="(item, index) in modelData.props?.radioOptions"
      :key="index"
      :value="item.value"
    >
      {{ item.label }}
    </a-radio>
  </a-radio-group>
  <!-- 多选框 -->
  <a-checkbox-group
    v-model="modelValues"
    :max="modelData.props.max"
    v-if="componentType === 'CHECK_BOX'"
  >
    <a-checkbox
      v-for="(item, index) in modelData.props?.checkOption"
      :key="index"
      :value="item.value"
    >
      {{ item.label }}
    </a-checkbox>
  </a-checkbox-group>
  <!-- 表格明细 -->
  <div
    class="gg"
    v-if="componentType === 'DETAIL_TABLE'"
    style="min-height: 50px; width: 100%"
  >
    <TableDetail v-model:data="modelData" :review="props.review" />
  </div>
  <div v-if="componentType === 'UPLOAD'">
    <Upload
      v-model:file-list="modelData.props.fileList"
      :limit="modelData.props.limit"
    />
  </div>
  <!-- 晋升图 -->
  <Promotion
    v-if="componentType === 'PROMOTION'"
    v-model:data="modelData.values"
  />
  <!-- 按钮 -->
  <a-button
    v-if="componentType === 'BUTTON'"
    v-model="modelData.values"
    @click="toUrl(modelData)"
  >
    按钮
  </a-button>
</template>
<script setup lang="ts">
import Upload from './components/Upload/components/Upload.vue';
import TableDetail from './components/TableDetail/index.vue';
import Select from '../FormItem/BaseControl/Select.vue';
import Promotion from './components/Promotion.vue';
import { useVModel } from '@vueuse/core';
import useControlFormStore from '@/store/controlForm';
const controlFormStore = useControlFormStore();
const props = withDefaults(
  defineProps<{
    data?: any;
    values?: any;
    isSub?: boolean;
    review?: boolean;
  }>(),
  {
    isSub: false,
    review: false
  }
);
const emits = defineEmits(['update:values', 'update:data']);
const modelData = useVModel(props, 'data', emits);
const modelValues = useVModel(props, 'values', emits);
const componentType = computed(() => {
  if (!modelData.value) return '错误';
  return props.data[controlFormStore.fieldNames.componentType];
});
const toUrl = (data: any) => {
  if (!data.props?.url) return;
  window.open(`//${data.props.url}`, '_blank');
};
</script>
<style lang="less" scoped>
.draggable {
  position: relative;
  min-height: 50px;
  // background-color: #f6f6f6;

  padding: 5px;
  z-index: 1999;
}
.table {
  display: flex;
  background-color: #f6f6f6;
}
.vecational-work {
  .noType {
    width: 100%;
    height: 32px;
    background: #f2f3f5;
    border-radius: 1px;
    margin-bottom: 20px;
    line-height: 32px;
    &:before {
      content: '';
      border-left: 5px solid #165dff;
      margin-right: 8px;
      height: 32px;
      line-height: 32px;
    }
  }
}
.center-item {
  position: relative;
  border: #fff solid 1px;
  background: white;
  border: rgb(236, 236, 236) solid 1px;

  .form-item {
    display: flex;
    height: 20px;
    position: relative;
    text-align: right;
    justify-content: space-between;

    .fill {
      z-index: 999;
      font-size: 14px;
    }
  }
  .form-item::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid skyblue;
    border-right: 15px solid transparent;
  }
  .require::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid rgb(136, 138, 139) !important;
    border-right: 15px solid transparent;
  }
  .mask {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    cursor: move;
  }
}
.center-item-choice {
  position: relative;
  border: #3296fa solid 1px;
  background: white;
  // border: rgb(73, 56, 148) solid 1px;
  .mask {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    cursor: move;
    // background: rgba(22, 93, 255, 0.2);
    // border: #3296fa solid 1px;
  }
  .form-item {
    // pointer-events: none;
    display: flex;
    height: 20px;

    .fill {
      z-index: 999;
    }
  }

  // .form-item::after {
  //   z-index: 999;
  //   content: "\2716";
  //   width: 20px;
  //   height: 20px;
  //   text-align: center;
  //   color: #3296fa;
  // }
  .require::after {
    z-index: 999;
    content: '';
    width: 20px;
    height: 20px;
    text-align: center;
    color: #3296fa;
  }
  .form-item::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid skyblue;
    border-right: 15px solid transparent;
  }
  .require::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid rgb(136, 138, 139) !important;
    border-right: 15px solid transparent;
  }
}

.center-item:hover {
  border: #3296fa dashed 1px;

  .form-item {
    // pointer-events: none;
    display: flex;
    z-index: 999;

    .fill {
      z-index: 999;
    }
  }

  // .form-item::after {
  //   z-index: 999;
  //   content: "\2716";
  //   width: 20px;
  //   height: 20px;
  //   text-align: center;
  //   color: #3296fa;
  // }
  .require::after {
    z-index: 999;
    content: '';
    width: 20px;
    height: 20px;
    text-align: center;
    color: #3296fa;
  }
}
.table-review {
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
  width: 100%;
  .action {
    text-align: right;
    color: #b8b8b8;
  }
  .layout-form-component {
    width: 100%;
  }
}
.gg {
  position: relative;
  .table-tip {
    color: #7d7d7f;
    z-index: 9999;
    position: absolute;
    font-size: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
